<style lang="scss">
  @import "../../../utils/base.scss";
</style>
<template>
  <div>
    <!-- 基本信息 -->
    <template id="baseInfo">
      <div class="qheader" :style="{borderBottom: '0px solid rgb(210,210,210)'}">
        <p>基本信息</p>
      </div>
      <div class="gcontent">
        <Form ref="baseInfo" :rules="networkInfoValidate" :model="networkInfo" :label-width="labelWidth"
          label-position="left" class="form form_left">
          <Row v-if="reqId != null && reqId != ''">
            <Col span="8">
            <FormItem label="工单ID：">
              <Input v-model="reqId" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="申请人:">
              <Input v-model="networkInfo.applyContact" :readonly="readonly" />
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="申请公司:">
              <Input v-model="networkInfo.company" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="申请人邮箱:">
              <Input v-model="networkInfo.applyMail" :readonly="readonly" />
            </FormItem>
            </Col>

            <Col span="8" class="col_left">
            <FormItem label="申请人电话:">
              <Input v-model="networkInfo.applyPhone" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <!-- <Row>
                        <Col span="8"  >
                            <FormItem label="一级4A账号:"  >
                                <Input  v-model="networkInfo.fourA" :readonly="readonly"/>
                            </FormItem>
                        </Col>
                    </Row> -->
          <Row>
            <Col span="8">
            <FormItem label="工单标题:" prop="reqSubject">
              <Input v-model="networkInfo.reqSubject" :readonly="ifedit" placeholder="XX系统与XX系统IP互联策略申请" />
            </FormItem>
            </Col>

          </Row>
          <Row>
            <Col span="8">
            <FormItem label="申请时间：" prop="startTime">
              <!-- <Input v-if="ifedit"  v-model="networkInfo.startTime" :readonly="true"/> -->
              <DatePicker :options="disabledDate" v-model="networkInfo.startTime" style="width: 100%;" type="date"
                :disabled="ifedit" placeholder="请选择日期"></DatePicker>
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="期望完成时间：" prop="hopeTime">
              <!-- <Input v-if="ifedit"  v-model="networkInfo.hopeTime" :readonly="true"/> -->
              <DatePicker :options="disabledDate" v-model="networkInfo.hopeTime" style="width: 100%;" type="date"
                :disabled="ifedit" placeholder="请选择日期"></DatePicker>
            </FormItem>
            </Col>
          </Row>
        </Form>
      </div>

    </template>

    <!-- 项目详情 -->
    <div id="projectInfo">
      <div class="qheader" :style="{borderBottom: '0px solid rgb(210,210,210)'}">
        <p>项目信息</p>
      </div>
      <div class="gcontent">
        <Form ref="projectInfo2" :rules="networkInfoValidate" :model="networkInfo.projectInfo" :label-width="labelWidth"
          label-position="left" class="form form_left">
          <Row>
            <Col span="8">
            <FormItem label="提单租户：" prop="roleId">
              <Input v-if="ifedit" v-model="networkInfo.projectInfo.roleName" :readonly="readonly" />
              <Select v-else v-model="networkInfo.projectInfo.roleId"
                @on-change="checkRole(networkInfo.projectInfo.roleId)" :disabled="ifedit">
                <Option :value="i.id" v-for="(i,index) in roleList" :key="index">{{i.tenant_name}}</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="关联项目：" prop="projectId">
              <Input v-if="ifedit" v-model="networkInfo.projectInfo.projectName" :readonly="readonly" />
              <Select v-else v-model="networkInfo.projectInfo.projectId"
                @on-change="setProjectName(networkInfo.projectInfo.projectId)" :disabled="ifedit">
                <Option :value="item.id" v-for="(item,index) in projectList" :key="index">{{item.project}}</Option>
              </Select>
            </FormItem>
            </Col>
          </Row>
          <!-- <Row>
                        <Col span="8">
                            <FormItem label="开始日期：" >
                                <Input v-model="networkInfo.projectInfo.entryStartTime" :readonly="readonly" />
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="结束日期：" >
                                <Input v-model="networkInfo.projectInfo.entryEndTime" :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row> -->
          <!-- <Row>
                        <Col span="8">
                            <FormItem label="入驻周期：" >
                                <Input v-model="networkInfo.projectInfo.entryCycle" :readonly="readonly" />
                            </FormItem>
                        </Col>
                        <Col span="8" class="col_left">
                            <FormItem label="入驻位置：" >
                                <Input v-model="networkInfo.projectInfo.entryPosition" :readonly="readonly" />
                            </FormItem>
                        </Col>
                    </Row> -->
          <Row>
            <!-- <Col span="8">
                            <FormItem label="是否签订合同：">
                                <Input v-model="networkInfo.projectInfo.isContract" :readonly="readonly" />
                            </FormItem>
                        </Col> -->
            <Col span="8">
            <FormItem label="入驻位置：">
              {{networkInfo.projectInfo.entryPositio}}
              <Input v-model="networkInfo.projectInfo.entryPosition" :readonly="readonly" />
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="项目类型：">
              <Input v-model="networkInfo.projectInfo.projectType" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="负责人：">
              <Input v-model="networkInfo.projectInfo.projectManager" :readonly="readonly" />
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="经理联系方式:">
              <Input v-model="networkInfo.projectInfo.managerTel" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="运营人员：">
              <Input v-model="networkInfo.projectInfo.business" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </div>

  </div>
</template>
<script>
  import ajax from "../../../ajax_util"
  import Axios from 'axios'
  import {
    mavonEditor
  } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  //import file from './file'

  export default {
    name: "apply",
    components: {
      mavonEditor
    },
    data() {
      const validateEntryEndTime = (rule, value, callback) => {
        console.log('validateEntryEndTimevalidateEntryEndTime')
        if (value === '') {
          callback(new Error('请选择期望完成时间'));
        } else {
          if (this.networkInfo.startTime === '') {
            callback(new Error('请选择工单发起时间'));
          } else if (this.networkInfo.startTime.getTime() > value.getTime()) {
            callback(new Error('期望完成时间不能小于工单发起时间'));
          } else {
            callback()
          }
        }
      };
      const validatestartTime = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择发起时间'));
        } else {
          callback()
        }
      };

      return {
        validate2: {
          roleId: [{
            required: true,
            type: 'number',
            message: '请选择租户角色',
            trigger: 'change'
          }, ],
          projectId: [{
            required: true,
            type: 'number',
            message: '请选择关联项目',
            trigger: 'change'
          }, ],
        },
        mdvalue: "",
        dataInfoEdit: 0,
        showFileMould: false,
        httpHeader: {
          Authorization: this.$store.state.token
        },
        disabledDate: {
          disabledDate(date) {
            return date && date.valueOf() < Date.now() - 24 * 60 * 60 * 1000 || date.valueOf() > Date.now() + 365 * 24 *
              60 * 60 * 1000;
          }
        },
        networkInfoValidate: {
          startTime: [{
            required: true,
            validator: validatestartTime,
            message: '请选择工单开始日期',
            trigger: 'change'
          }, ],
          hopeTime: [{
            required: true,
            validator: validateEntryEndTime,
            trigger: 'blur'
          }],
          reqSubject: [{
              required: true,
              type: 'string',
              message: '请输入工单标题:',
              trigger: 'blur'
            },
            {
              type: 'string',
              max: 50,
              message: '最多填写50个字符',
              trigger: 'blur'
            }
          ],
          roleId: [{
            required: true,
            type: 'number',
            message: '请选择租户角色',
            trigger: 'change'
          }, ],
          projectId: [{
            required: true,
            type: 'number',
            message: '请选择关联项目',
            trigger: 'change'
          }, ],
        },

        fileUrl: this.CONFIG.file_url,
        readonly: true, //是否只读
        labelWidth: 140,
        bealoonTrue: true,
        file: null,
        loadingStatus: false,
        fileUpLoadAction: "",
        name: "",
        istrue: true,
        networkInfo: this.Papply,
        projectList: this.PprojectList,
        // roleList:this.ProleList,
        roleList: [],
        userId: this.PuserId,
      }
    },
    created: function() {},
    mounted: function() {
      console.log("userId", this.userId)
      console.log("======networkInfo=======", this.networkInfo);
      if (this.networkInfo.projectInfo.roleId != null && this.networkInfo.projectInfo.roleId != undefined && this
        .networkInfo.projectInfo.roleId != "") {
        this.checkRole(this.networkInfo.projectInfo.roleId);
      }
    },

    methods: {
      validate() {
        var isSubmit = false
        this.$refs["baseInfo"].validate((valid) => {
          if (valid) {
            isSubmit = true
          } else {
            this.$Message.error('请填写必填项');
          }
        })
        if (isSubmit) {
          this.$refs["projectInfo2"].validate((valid) => {
            if (valid) {
              isSubmit = true
            } else {
              isSubmit = false
              this.$Message.error('请填写必填项');
            }
          })
        }

        console.log("isSubmit---->", isSubmit)
        return isSubmit
      },

      //格式化日期
      formatDate(value) {
        var date = new Date(value * 1000);
        var year = date.getFullYear();
        var month = this.padDate(date.getMonth() + 1);
        var day = this.padDate(date.getDate());
        return year + '-' + month + '-' + day;
      },
      padDate(value) {
        return value < 10 ? '0' + value : value;
      },
      //选择租户
      checkRole(roleId) {
        console.log("roleId2222--->", roleId, this.roleList, this.networkInfo.projectInfo.projectId)
        //console.log("projectList->",this.projectList,this.ProleList)
        //this.networkInfo.projectInfo = {}
        // this.roleList.some(item =>{
        //     if(roleId == item.id){
        //         this.networkInfo.projectInfo.roleId = roleId
        //         this.networkInfo.projectInfo.roleName = item.role_name
        //         this.projectList=item.projects
        //         return true
        //     }
        // })

        var url = this.CONFIG.url_know + "/getProjects/" + roleId
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.projectList = data
          }
        })
        // console.log("projectList22222->",this.projectList)
      },
      //设置项目名称
      setProjectName(value) {
        this.projectList.some(item => {
          //console.log("projectList->",this.projectList,item,value)
          if (item.id === value) {
            this.networkInfo.projectInfo.projectName = item.project
            console.log("item->", item)
            this.setProjectInfo(item)
            return true
          }
        })
      },
      //设置项目基础详情
      setProjectInfo(data) {
        // var info = {}
        var info = {}
        info.roleId = data.tenant_id
        if (data.tenant_name != null) {
          info.roleName = data.tenant_name
        }
        info.projectId = data.id
        info.projectName = data.project
        info.entryStartTime = data.create_time
        info.entryEndTime = data.end_time
        info.entryCycle = data.cycle
        info.entryPosition = data.position
        info.isContract = data.isContract
        info.projectType = data.projectType
        info.projectManager = data.manager
        info.managerTel = data.manager_phone
        if (data.business == undefined || data.business == null || data.business == "") {
          info.business = data.tenant_business
        } else {
          info.business = data.business
        }
        info.projectDoc = data.des
        this.networkInfo.projectInfo = info
        //console.log("-----info---",this.networkInfo);
        this.$forceUpdate();
      },
      getRoleLis(userId) {
        var url = this.CONFIG.url_know + "/tenantByUserId/" + userId
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            console.log("====getRoleLis=1111=====", data);
            that.roleList = data

            if (that.networkInfo.projectInfo.roleId != null && that.networkInfo.projectInfo.roleId != '') {
              that.checkRole(that.networkInfo.projectInfo.roleId);
            }
          }
        })
      },
    },
    props: {
      reqId: {},
      PuserId: {},
      ifedit: {},
      Papply: {},
      ProleList: {},
      PprojectList: {}
    },
    watch: {
      // ifedit(Val){
      //     console.log("ifedit------->",this.ifedit)
      //     if(!this.ifedit){
      //         this.getAllSys();
      //         this.getRoleLis(this.userId);
      //         this.checkRole(this.networkInfo.projectInfo.roleId);
      //     }
      // },
      PuserId(newV, oldV) {
        console.log("PuserId---->", newV)
        this.userId = newV
        this.getRoleLis(this.userId)
      },
      Papply(newV, oldV) {
        console.log("Papply---->", newV)
        this.networkInfo = this.Papply
      },
      PprojectList(newV, oldV) {
        console.log("PprojectList---->", newV)
        this.projectList = newV
      },
      ProleList(newV, oldV) {
        console.log("ProleList---->", newV)
        this.roleList = newV
      }

    }

  }
</script>
